<template>
  <div class="order_box">
    <van-nav-bar title="供应商入驻" @click-left="goBack">
      <template #left>
        <van-icon class="back_icon" name="arrow-left" />
      </template>
    </van-nav-bar>
    <div class="shop_cart_box">
      <div class="shop_cart_contant">
        <div class="shop_box">
          <van-form  ref="form">
            <van-field
              v-model="settleFormData.businessName"
              name="商家名称"
              label="商家名称"
              placeholder="商家名称"
              :rules="[{ required: true, message: '请填写商家名称' }]"
            />
            <van-field
              v-model="settleFormData.businessTel"
              name="商家电话"
              label="商家电话"
              placeholder="商家电话"
              :rules="[{ required: true, message: '请填写商家电话' }]"
            />
            <van-field
              v-model="settleFormData.businessContacts"
              name="联系人"
              label="联系人"
              placeholder="联系人"
              :rules="[{ required: true, message: '请填写联系人' }]"
            />
            <van-field
              readonly
              clickable
              :value="columns[settleFormData.businessType]"
              name="picker"
              label="商家类型"
              placeholder="个人/企业/个体"
              @click="showPicker = true"
              :rules="[{ required: true, message: '请选择' }]"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @confirm="seleShopType"
                @cancel="showPicker = false"
              />
            </van-popup>
            <div class="emtoy_box"></div>
            <van-field
              readonly
              clickable
              :value="['否','是'][settleFormData.hasBase]"
              name="picker"
              label="是否有基地"
              placeholder="是/否"
              @click="showPicker2 = true"
            />
            <van-popup v-model="showPicker2" position="bottom">
              <van-picker
                show-toolbar
                :columns="['否','是']"
                @confirm="seleShopIs"
                @cancel="showPicker2 = false"
              />
            </van-popup>
            <div class="emtoy_box"></div>
            <van-field
              readonly
              clickable
              name="area"
              :value="settleFormData.province"
              label="地区选择"
              placeholder="点击选择省市区"
              @click="showArea = true"
              :rules="[{ required: true, message: '请选择' }]"
            />
            <van-popup v-model="showArea" position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="seleShopAddress"
                @cancel="showArea = false"
              />
            </van-popup>
            <van-field
              rows="3"
              v-model="settleFormData.address"
              autosize
              label="详细地址"
              type="textarea"
              placeholder="请输入"
            />
            <div class="emtoy_box"></div>
            <div class="form_ietm" @click="$router.push('/mainBusiness')">
              <div>主营鲜花</div>
              <div class="place">请选择</div>
            </div>
          </van-form>
        </div>
        <div>
          <div class="next_action" @click="nextForm">下一步</div>
          <!-- <van-button round block type="primary" native-type="submit">下一步</van-button> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import city from "@/assets/city";
/**
 * 只要settleFormData 有变化 统一存到vuex里面 每次初始化 从vuex里面读取数据显示
 * 最后提交完成清空数据或者回到其他页面清空数据
 */
export default {
  data() {
    return {
      number: "",
      columns: ["个人", "企业", "个体商户"],
      showPicker: false,
      showPicker2: false,
      showArea: false,
      settleFormData: {
        businessContacts: "",
        businessContacts: "",
        address: "",
        businessName: "",
        businessTel: "",
        businessType: "",
        province: "",
        hasBase: '',
        address: "",
        mainProductType: [] // 主营鲜花
      },
      areaList: city
    };
  },

  watch: {
    settleFormData: {
      handler(newName, oldName) {
        this.$store.commit("ShopSettleIn/setSettleData", newName);
      },
      deep: true
    }
  },

  created () {
    this.settleFormData = this.$store.state.ShopSettleIn.settleFormData
  },

  methods: {
    async nextForm() {
    //   await this.$refs.form.validate();
    // this.$router.push("/authForm2");
      this.$refs.form.validate().then(res => {
        this.$router.push("/authForm2");
      }).catch(err => {})      
    },

    // 商家类型选择
    seleShopType(e) {
      this.settleFormData.businessType = this.columns.indexOf(e) + 1;
      this.showPicker = false;
    },
    // 是否有基地
    seleShopIs(e) {
      this.settleFormData.hasBase = this.columns.indexOf(e) + 1;
      this.showPicker2 = false
    },
    // 选择的地址
    seleShopAddress(e) {
      this.settleFormData.province = e.map(item => item.name).join("/");
      this.showArea = false;
    },
    goBack(){
        this.settleFormData = {}
        this.$router.go(-1)    
    }
  }
};
</script>
<style lang="scss" scoped>
.next_action {
  width: 100%;
  margin-top: 22px;
  height: 45px;
  background: rgba(0, 198, 87, 1);
  border-radius: 5px;
  font-size: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 254, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.emtoy_box {
  width: 100%;
  height: 10px;
  background: #f7f9fc;
}
.form_ietm {
  width: 100%;
  margin-top: 10px;
  color: #323233;
  font-size: 14px;
  @extend .flex;
  .place {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(169, 174, 192, 1);
  }
}
.dele {
  background: #00c657 !important;
  border: none !important;
  color: #ffffff !important;
}
.edit {
  border-color: #ff6200 !important;
  color: #ff6200 !important;
}
.baseOpear {
  width: m-w(210);
  height: 35px;
  border: 1px solid rgba(0, 198, 87, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 198, 87, 1);
}

.or_d {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 198, 87, 1);
}
.act_box {
  margin-top: 20px;
  width: 100%;
  height: 45px;
  background: #00c658;
  border-radius: 5px;
  font-size: m-w(32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 255, 1);
}
.des_or {
  margin-top: 21px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(170, 174, 192, 1);
}
.photp {
  padding: 20px m-w(20);
  margin-top: 21px;
  background: white;
  border-radius: 10px;
}
.da_2 {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
}
.da_1 {
  span {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
  }
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.freight_flex {
  @extend .flex;
  margin-top: 20px;
}
.input_box {
  margin-top: 10px;
  input {
    text-align: right;
  }
}
.g_1 {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
}
.order_num {
  margin-top: 21px;
  margin-bottom: 15px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(170, 174, 192, 1);
  @extend .flex;
}
.shop_box {
  background: rgba(255, 255, 255, 1);
  border-radius: m-w(10);
  padding: 15px m-w(20);
  margin-top: 10px;
}
.shop_cart_box {
  width: 100%;
  .shop_cart_contant {
    padding: 10px;
  }
}
.order_box {
  width: 100%;
  min-height: 100vh;

  background: #f7f9fc;
}
.back_icon {
  color: #343434;
  font-size: 20px;
}
</style>
